<script setup lang="ts">
import { computed, onMounted, reactive, ref } from "vue";
import { ElForm } from "element-plus";
import { userData } from "@/views/marketForecast/loadForecasting/testData";
const loading = ref(false);

const lenData = reactive({
  data: [
    {
      value: 1,
      label: "9KM网格气象"
    }
  ]
});

const yesOrNo = ref([
  {
    value: 1,
    label: "是"
  },
  {
    value: 2,
    label: "否"
  }
]);
const form = reactive({
  data: {
    activeTime: ["2024-06-15", "2024-06-18"],
    activeTime1: "2024-06-15",
    activeTime2: "2024-06-18",
    one: 1
  },
  rules: {}
});
</script>

<template>
  <div class="main h-[calc(100%-29px)]">
    <el-card v-loading="loading" class="w-full my-card-full">
      <el-form
        ref="formRef"
        :model="form.data"
        :rules="form.rules"
        label-width="220px"
        style="display: block; width: 100%"
        class="px-[20px]"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="初始化系统负荷特性周月数据" prop="activeTime">
              <el-row :gutter="20">
                <el-date-picker
                  v-model="form.data.activeTime"
                  unlink-panels
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="YYYY-MM-DD"
                  date-format="YYYY-MM-DD"
                  class="mx-[15px]"
                />
                <el-button type="primary">确定</el-button>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="初始化系统质量分析时刻点差值"
              prop="activeTime"
            >
              <el-row :gutter="20">
                <el-date-picker
                  v-model="form.data.activeTime"
                  unlink-panels
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="YYYY-MM-DD"
                  date-format="YYYY-MM-DD"
                  class="mx-[15px]"
                />
                <el-button type="primary">确定</el-button>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="初始化系统质量分析数据" prop="activeTime">
              <el-row :gutter="20">
                <el-date-picker
                  v-model="form.data.activeTime"
                  unlink-panels
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="YYYY-MM-DD"
                  date-format="YYYY-MM-DD"
                  class="mx-[15px]"
                />
                <el-button type="primary">确定</el-button>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="初始化系统稳定度分析数据" prop="activeTime">
              <el-row :gutter="20">
                <el-date-picker
                  v-model="form.data.activeTime"
                  unlink-panels
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="YYYY-MM-DD"
                  date-format="YYYY-MM-DD"
                  class="mx-[15px]"
                />
                <el-select
                  v-model="form.data.one"
                  style="width: 100px"
                  class="mr-[15px]"
                >
                  <el-option
                    v-for="item in userData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
                <el-button type="primary">执行</el-button>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="系统历史负荷数据拷贝" prop="activeTime">
              <el-row :gutter="20">
                <el-date-picker
                  v-model="form.data.activeTime1"
                  unlink-panels
                  type="date"
                  value-format="YYYY-MM-DD"
                  date-format="YYYY-MM-DD"
                  class="mx-[15px]"
                />
                <span>到</span>
                <el-date-picker
                  v-model="form.data.activeTime2"
                  unlink-panels
                  type="date"
                  value-format="YYYY-MM-DD"
                  date-format="YYYY-MM-DD"
                  class="mx-[15px]"
                />
                <el-select
                  v-model="form.data.one"
                  style="width: 100px"
                  class="mr-[15px]"
                >
                  <el-option
                    v-for="item in userData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
                <el-button type="primary">执行</el-button>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="气象预报数据拷贝" prop="activeTime">
              <el-row :gutter="20">
                <el-date-picker
                  v-model="form.data.activeTime1"
                  unlink-panels
                  type="date"
                  value-format="YYYY-MM-DD"
                  date-format="YYYY-MM-DD"
                  class="mx-[15px]"
                />
                <span>到</span>
                <el-date-picker
                  v-model="form.data.activeTime2"
                  unlink-panels
                  type="date"
                  value-format="YYYY-MM-DD"
                  date-format="YYYY-MM-DD"
                  class="mx-[15px]"
                />
                <el-select
                  v-model="form.data.one"
                  style="width: 100px"
                  class="mr-[15px]"
                >
                  <el-option
                    v-for="item in lenData.data"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-button type="primary">执行</el-button>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="预测数据入库" prop="activeTime">
              <el-row :gutter="20">
                <el-date-picker
                  v-model="form.data.activeTime"
                  unlink-panels
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="YYYY-MM-DD"
                  date-format="YYYY-MM-DD"
                  class="mx-[15px]"
                />
                <el-button type="primary">执行</el-button>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="生成预测负荷e文件" prop="activeTime">
              <el-row :gutter="20">
                <el-date-picker
                  v-model="form.data.activeTime"
                  unlink-panels
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="YYYY-MM-DD"
                  date-format="YYYY-MM-DD"
                  class="mx-[15px]"
                />
                <el-button type="primary">执行</el-button>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="生成历史数据文件" prop="activeTime">
              <el-row :gutter="20">
                <el-date-picker
                  v-model="form.data.activeTime1"
                  type="date"
                  value-format="YYYY-MM-DD"
                  date-format="YYYY-MM-DD"
                  class="mx-[15px]"
                />
                <el-button type="primary">执行</el-button>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="加载山东历史数据" prop="activeTime">
              <el-row :gutter="20">
                <el-button class="mx-[15px]" type="primary">执行</el-button>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="导出系统历史负荷" prop="activeTime">
              <el-row :gutter="20">
                <el-date-picker
                  v-model="form.data.activeTime"
                  unlink-panels
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="YYYY-MM-DD"
                  date-format="YYYY-MM-DD"
                  class="mx-[15px]"
                />
                <el-button type="primary">导出</el-button>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="导出短期系统预测负荷" prop="activeTime">
              <el-row :gutter="20">
                <el-date-picker
                  v-model="form.data.activeTime"
                  unlink-panels
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="YYYY-MM-DD"
                  date-format="YYYY-MM-DD"
                  class="mx-[15px]"
                />
                <el-button type="primary">导出</el-button>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="导入系统历史负荷" prop="activeTime">
              <el-row :gutter="20">
                <el-button class="mx-[15px]" type="primary">导入</el-button>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="导入短期系统预测负荷" prop="activeTime">
              <el-row :gutter="20">
                <el-button class="mx-[15px]" type="primary">导入</el-button>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.my-card-full {
  :deep(.el-card__body) {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .demo-tabs {
      display: flex;
      flex: 1;
      flex-direction: column;
      overflow: hidden;

      .el-tabs__content {
        flex: 1;

        .el-tab-pane {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
